<template>
    <el-card>
        <el-form ref="queryFormRef" :inline="true" :model="queryParam" class="queryFrom">
            <el-form-item label="host">
                <el-input v-model="queryParam.host" placeholder="请输入host" />
            </el-form-item>
            <el-form-item label="登录用户">
                <el-select v-model="queryParam.userId" placeholder="请选择登录用户">
                    <el-option v-for="item in users" :key="item.id" :label="item.realName" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="登录时间">
                <el-date-picker v-model="queryParam.rangeTime" type="datetimerange" range-separator="至"
                    start-placeholder="开始时间" end-placeholder="结束时间" 
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="querySelective" :icon="Search">查询</el-button>
                <el-button @click="resetQuery" :icon="Refresh">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>
    <el-card>
        <el-button type="danger" :icon="Delete" class="mb-[20px]" v-perm="'sys:log:login:delete'"
            @click="batchDelete()">删除</el-button>

        <el-table :data="tableData" height="calc(100vh - 285px)" max-height="calc(100vh - 285px)" stripe
            :header-cell-style="{ 'background-color': 'rgba(229, 231, 235, var(--tw-bg-opacity))' }" row-key="id"
            @selection-change="handleSelectionChange" v-loading="loading">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="host" label="host" />
            <el-table-column label="登录用户">
                <template #default="scope">
                    {{ scope.row.realName }}({{ scope.row.username }})
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="登录时间"/>
            <el-table-column fixed="right" label="操作" width="200px">
                <template #default="scope">
                    <el-button link type="danger" size="small" :icon="Delete" v-perm="'sys:log:login:delete'"
                        @click="deleteById(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[30, 50, 100, 300, 500]"
            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="pageSizeChange"
            @current-change="pageNumChange" />
    </el-card>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { Search, Refresh, Delete } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

import { selectReq } from '@/api/sys/user/index.js'
import { querySelectiveReq, deleteReq } from '@/api/sys/log/login/index.js'

const users = ref([])
const loading = ref(false)
onMounted(async() => {
    loading.value = true;
    const userRes = await selectReq();
    if (userRes.code == 200) {
        users.value = userRes.data
    }
    querySelective();
})

const queryParam = reactive({
    host: '',
    userId: '',
    rangeTime:[]
})
const tableData = ref([])
const total = ref(0)
const querySelective = async () => {
    const res = await querySelectiveReq(pageNum.value, pageSize.value, queryParam);
    if (res.code == 200) {
        tableData.value = res.data.data
        total.value = res.data.total
    }
    loading.value = false
}

const pageNum = ref(1)
const pageSize = ref(30)
const pageSizeChange = (val) => {
    pageNum.value = 1;
    pageSize.value = val;
    querySelective();
}
const pageNumChange = (val) => {
    pageNum.value = val;
    querySelective();
}

const queryFormRef = ref()
const resetQuery = () => {
    //  重置表单
    queryParam.host = ''
    queryParam.userId = ''
    queryParam.rangeTime = []
    queryFormRef.value?.resetFields()
    pageNumChange(1);
}

const selectIds = ref([])
const handleSelectionChange = (val) => {
    selectIds.value = []
    val.forEach(item => {
        selectIds.value.push(item.id);
    })
    console.log("selectIds", selectIds.value)
}

const batchDelete = () => {
    if (selectIds.value.length == 0) {
        ElMessage({
            message: '请选择要删除的登录日志！',
            grouping: true,
            type: 'error',
        })
        return;
    }
    ElMessageBox.confirm(
        '此操作将删除选中的登录日志，您确定要继续吗？',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        deleteReq(selectIds.value).then(res => {
            if (res.code == 200) {
                ElMessage.success(res.message)
                querySelective();
            }
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '取消删除！',
        })
    })
}

const deleteById = (id) => {
    ElMessageBox.confirm(
        '此操作将删除本登录日志，您确定要继续吗？',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        const ids = []
        ids.push(id)
        deleteReq(ids).then(res => {
            if (res.code == 200) {
                ElMessage.success(res.message)
                querySelective();
            }
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '取消删除！',
        })
    })
}
</script>

<style>
.queryFrom .el-form-item {
    margin-bottom: 0px;
}

.tableHeaderClass {
    background-color: #d3d3d3;
    /* 灰色背景 */
}
</style>